@import "./mapping";

$background-color-light: #333867;
$background-color-deep: #17193b;
$card-shadow: 0 23px 20px -20px rgba(9,10,18,.1), 0 0 15px rgba(9,10,18,.06);
$solid-background: no-repeat radial-gradient(farthest-side ellipse at 10% 0, #333867, #17193b);
$popover-background: $solid-background;
$blurred-background-color: rgba(0,0,0,.24);
$blurred-focus-background-color: rgba(0,0,0,.34);
$white-blurred: rgba($color: #ffffff, $alpha: 0.1);

$theme: (
  font-family-primary: unquote('Montserrat, Open Sans, sans-serif'),
  
  background-basic-color-1: $background-color-deep,
  /* backdrop */
  backdrop-background: $blurred-background-color,
  backdrop-back-background: backdrop-background,
  
  /* fullscreen */
  ngm-fullscreen-card-background: $popover-background,

  /* Slide out component */
  slide-out-background: $popover-background,
  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,

  layout-background: $solid-background,
  header-background-color: none,
  header-shadow: none,
  footer-background-color: unset,
  sidebar-background-color: $background-color-light,
  sidebar-shadow: none,
  sidebar-width-compact-background: $solid-background,

  card-background-color: $blurred-background-color,
  card-border-width: 0,
    // border: nb-theme(card-border-width) nb-theme(card-border-style) nb-theme(card-border-color);
  card-border-radius: 10px,
  card-shadow: $card-shadow,
  card-divider-width: 0,

    // color: nb-theme(card-text-color)
  // accordion-shadow: card-shadow,
  // accordion-border-radius: card-border-radius,
  //accordion-item-background-color: card-background-color,

  // border: nb-theme(popover-border-width) solid nb-theme(popover-border-color);
  popover-border-radius: card-border-radius,
  popover-background-color: $popover-background,
  popover-shadow: card-shadow,
  popover-border-width: 0,

  select-filled-basic-background-color: $blurred-background-color,
  select-filled-basic-focus-background-color: $blurred-focus-background-color,
  select-filled-basic-hover-background-color: $blurred-focus-background-color,
  select-outline-basic-background-color: $blurred-background-color,
  select-outline-basic-focus-background-color: $blurred-focus-background-color,
  select-outline-basic-hover-background-color: $blurred-focus-background-color,
  select-outline-border-width: 0,
  option-background-color: unset,
  // option-active-background-color: $blurred-background-color,
  select-option-background: $popover-background,
  select-option-selected-background-color: $blurred-background-color, 
  select-option-focus-background-color: $blurred-background-color,
  select-option-hover-background-color: $blurred-background-color,
  option-list-border-width: 0,
  option-list-shadow: $card-shadow,

  dialog-background: $popover-background,

  input-background-color: $blurred-background-color,
  input-basic-background-color: $blurred-background-color,
  input-basic-focus-background-color: $blurred-focus-background-color,
  input-basic-hover-background-color: $blurred-focus-background-color,
  input-basic-hover-border-color: $blurred-background-color,
  // button-outline-background-color: $blurred-background-color,
  // button-ghost-background-color: $blurred-background-color,
  button-outline-primary-focus-background-color: $blurred-background-color,
  // button-outline-border-width: 0,

  button-ghost-primary-focus-background-color: $blurred-background-color,
  button-ghost-primary-hover-background-color: $blurred-background-color, 
  button-ghost-primary-active-background-color: $blurred-background-color,

  button-ghost-border-width: 0,

  checkbox-border-width: 0,

  menu-item-divider-width: 0,

  ngm-chip-background: $blurred-background-color,

  smart-filter-input-background: $blurred-background-color,
  tag-hover-background: $blurred-background-color,

  smart-table-datatable-background-color: unset,
  smart-table-header-background-color: $blurred-background-color,
  smart-table-resize-handle-color: $blurred-background-color,
  smart-table-resize-handle-width: 5px,
  smart-table-row-hover-background-color: $white-blurred,
  grid-striped-background: $blurred-background-color,
  grid-bordered-color: rgb(4, 6, 32),
  
  ngm-neutral-color: color-basic-300,

  // Text Font
  text-subtitle-font-weight: 200,
);

$theme: map-merge($ngm-mapping, $theme);

// register the theme
$nb-themes: nb-register-theme($theme, thin, dark);

.nb-theme-thin nb-layout .layout {
  background: $solid-background;
}

.nb-theme-thin nb-option-list {
  background: $solid-background;
}
